<template>
    <div id="app" style="display: flex;flex-direction: column;">
        <div class="header">
            <div class="banner1">
                <div class="bannerLogo"></div>
                <div class="bannerSearchBox">
                    <el-input
                            placeholder="搜索"
                            v-model="searchValue">
                        <i slot="suffix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                </div>
            </div>
        </div>
        <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#3782c5"
                text-color="#fff"
                active-text-color="rgb(0 71 231)">
            <el-menu-item index="0">首页</el-menu-item>
            <template v-for="(item, index) in menuListTree">
                <el-submenu :index="item.id.toString()" :key="index">
                    <template slot="title"> {{ item.label }}</template>
                    <template v-for="(childrenItem, childrenIndex) in item.children">
                        <el-menu-item :index="childrenItem.id.toString()" :key="childrenIndex"
                                      @click="getMenuLable(item.label,item.id,childrenItem.id)">
                            {{ childrenItem.label }}
                        </el-menu-item>
                    </template>
                </el-submenu>
            </template>

            <el-submenu index="/">
                <template slot="title">用户中心</template>
                <el-menu-item index="99">用户登入</el-menu-item>
                <el-menu-item index="100">账号管理</el-menu-item>

            </el-submenu>
        </el-menu>

        <div class="content">
            <IndexHome v-if="isShowOne" @childEvent="handleChildEvent"></IndexHome>
            <SecondaryPage v-else-if="isShowTwo" :params="params"/>
        </div>

        <div class="footer">
            <div class="footerOne"></div>
            <div style="margin: 15px 0">您是第<span
                    style="margin: 0 10px">{{number}}</span>位访问者
            </div>
            <div class="footerTwo">大连市银行协会 DALIAN BANKING ASSOCIATION 2013-2020 版权所有</div>
            <div class="footerTwo">地址：大连市中山区延安路9号一方大厦23层 邮编：116001 传真：0411-39606312</div>
            <div class="footerTwo"> 备案号: <a href="http://beian.miit.gov.cn/" style=" color: white; text-decoration: none;"><span>辽ICP备15002892号-1</span></a></div>
        </div>
    </div>

</template>
<script>
    import IndexHome from './components/IndexHome.vue';
    import SecondaryPage from './components/SecondaryPage.vue';
    import {
        navigationMenuTree,
        navigationMenu,
        selectNewInfo,
        selectOneNewsInfo,
        creditProducts,
        addVisits,
        iPAddress,
        selectVisits,
    } from '@/api/api'

    export default {
        data() {
            return {
                // 导航菜单开始索引
                activeIndex: "0",
                // 搜索绑定的值
                searchValue: '',
                // 树形菜单数据
                menuListTree: [],
                // 子页面传参
                params: {
                    menuName: '',
                    menuId: '',
                    menuList: [],
                    contentList: [],
                    // one显示列表页  two显示详细页 three信贷产品
                    flag: 'one',
                    data: null,
                },
                // 是否显示子页面列表信息
                isShowOne: true,
                // 是否显示子页面列表中详细信息
                isShowTwo: false,
                // 查询参数
                queryParams: {
                    typeId: null,
                },
                ipAddress: null,
                number: null,

            };
        },
        components: {
            IndexHome,
            SecondaryPage
        },
        created() {
            this.selectMenu();
            this.getSelectVisits();
        },
        methods: {
            // 查询访客量
            getSelectVisits() {
                selectVisits().then(response => {
                    this.number = response
                    this.getIPAddress()
                })
            },
            // 获取访客量
            getAddVisits() {
                console.log(this.ipAddress)
                addVisits({
                    source: 2,
                    ip: this.ipAddress
                }).then()
            },
            getIPAddress() {
                iPAddress().then(response => {
                    this.ipAddress = response;
                    this.getAddVisits()
                })
                    .catch(error => {
                        console.log(error);
                    });

            },
            // 查询导航栏
            selectMenu() {
                navigationMenuTree({
                    MasterMenuId: 0
                }).then(response => {
                    this.menuListTree = response.data
                })
            },
            // 选择菜单导航栏
            handleSelect(key) {
                this.isShowOne = true;
                this.isShowTwo = false;
                console.log("key", key)
                if (key == 0) {
                    this.isShowOne = true;
                    this.isShowTwo = false;
                } else if (key == 99) {
                    window.location.href = "http://www.dba.org.cn/Login.aspx"
                } else if (key == 100) {
                    window.location.href = "http://www.dba.org.cn/AccManage.aspx"
                } else {
                    this.isShowOne = false;
                }
            },
            handleChildEvent(data) {
                this.activeIndex = data.sonMenu
                this.getMenuLable(data.lable, data.zId, data.sId, data.val)
            },
            // 获取单击导航栏跳转 lable：主菜单标识,zId：主菜单值, sId：子菜单值
            getMenuLable(lable, zId, sId, v) {
                console.log("对吗？")
                console.log(lable, zId, sId)
                console.log(v)
                this.params = {};
                this.queryParams = {};
                navigationMenu({
                    id: sId
                }).then(response => {
                        this.params.menuList = response.data
                        this.params.menuName = lable
                        this.params.menuId = sId
                        this.params.data = v
                        // 协会简介
                        if (zId == 1) {
                            // 定义判断二级菜单显示子页面对应内容
                            let mark = null
                            if (sId == 7) {
                                // 协会简介
                                this.queryParams.typeId = 1
                                mark = 1
                            } else if (sId == 18) {
                                // 组织机构
                                this.queryParams.typeId = 5
                                mark = 1
                            } else if (sId == 19) {
                                // 协会章程
                                this.queryParams.typeId = 6
                                mark = 1
                            } else if (sId == 16679) {
                                // 登记事项
                                this.queryParams.typeId = 7
                                mark = 1
                            } else if (sId == 16682) {
                                // 理事监事单位
                                this.queryParams.typeId = 41
                                mark = 0
                            } else if (sId == 16683) {
                                // 会员单位名录
                                this.queryParams.typeId = 8
                                mark = 1
                            } else if (sId == 16684) {
                                // 会员收取标准
                                this.queryParams.typeId = 9
                                mark = 1
                            } else if (sId == 16685) {
                                // 工作报告
                                this.queryParams.typeId = 42
                                mark = 0
                            }
                            if (mark == 1) {
                                // 显示详细页
                                selectOneNewsInfo({
                                    id: this.queryParams.typeId
                                }).then(response => {
                                    this.params.contentList = response.data
                                    this.params.flag = 'two';
                                    this.isShowTwo = true;
                                    this.isShowOne = false;
                                })
                            } else if (mark == 0) {
                                // 显示列表页
                                selectNewInfo(this.queryParams).then(response => {
                                    this.params.contentList = response.data
                                    this.params.flag = 'one';
                                    this.isShowTwo = true;
                                    this.isShowOne = false;
                                })
                            }
                        } else if (zId == 2) {
                            if (sId == 20) {
                                // 协会动态
                                this.queryParams.typeId = 4
                            } else if (sId == 49) {
                                // 协会公告
                                this.queryParams.typeId = 27
                            }
                            selectNewInfo(this.queryParams).then(response => {
                                this.params.contentList = response.data
                                this.params.flag = 'one';
                                this.isShowTwo = true;
                                this.isShowOne = false;
                            })
                        } else if (zId == 3) {
                            if (sId == 22) {
                                // 会员动态
                                this.queryParams.typeId = 8
                            } else if (sId == 23) {
                                // 业务新创
                                this.queryParams.typeId = 12
                            } else if (sId == 24) {
                                // 企业文化
                                this.queryParams.typeId = 13
                            }
                            selectNewInfo(this.queryParams).then(response => {
                                this.params.contentList = response.data
                                this.params.flag = 'one';
                                this.isShowTwo = true;
                                this.isShowOne = false;
                            })
                        } else if (zId == 4) {
                            if (sId == 29) {
                                // 财经新闻
                                this.queryParams.typeId = 24
                            } else if (sId == 30) {
                                // 行为动态
                                this.queryParams.typeId = 25
                            } else if (sId == 31) {
                                // 国际金融
                                this.queryParams.typeId = 26
                            } else if (sId == 16686) {
                                // 监管政策
                                this.queryParams.typeId = 44
                            }
                            selectNewInfo(this.queryParams).then(response => {
                                this.params.contentList = response.data
                                this.params.flag = 'one';
                                this.isShowTwo = true;
                                this.isShowOne = false;
                            })
                        } else if (zId == 5) {
                            if (sId == 34) {
                                // 融资信息
                                window.location.href = "http://www.dba.org.cn/YinTuanList.aspx"
                            }
                            this.params.contentList = []
                            this.params.flag = 'one';
                            this.isShowTwo = true;
                            this.isShowOne = false;
                        } else if (zId == 6) {
                            if (sId == 37) {
                                // 信贷产品信息查询
                                creditProducts().then(response => {
                                    this.params.contentList = response.data
                                    this.params.flag = 'three';
                                    this.isShowTwo = true;
                                    this.isShowOne = false;
                                })
                            } else if (sId == 40) {
                                // 金融常识
                                this.queryParams.typeId = 22
                                selectNewInfo(this.queryParams).then(response => {
                                    this.params.contentList = response.data
                                    this.params.flag = 'one';
                                    this.isShowTwo = true;
                                    this.isShowOne = false;
                                })
                            } else if (sId == 41) {
                                // 打击非法集资宣传
                                this.params.flag = 'five';
                                this.isShowTwo = true;
                                this.isShowOne = false;
                            } else if (sId == 50) {
                                // 金融产品价格公示
                                this.params.flag = 'four';
                                this.isShowTwo = true;
                                this.isShowOne = false;
                            }

                        } else if (zId == 42) {
                            if (sId == 46) {
                                // 合规知识竞赛
                                this.queryParams.typeId = 35
                            } else if (sId == 47) {
                                //培训课件
                                this.queryParams.typeId = 36
                            } else if (sId == 13687) {
                                // 报表模板
                                this.queryParams.typeId = 38
                            } else if (sId == 16669) {
                                // 其他资料
                                this.queryParams.typeId = 39
                            }
                            selectNewInfo(this.queryParams).then(response => {
                                this.params.contentList = response.data
                                this.params.flag = 'one';
                                this.isShowTwo = true;
                                this.isShowOne = false;
                            })
                        }
                    }
                )
            }
        }
    }
</script>

<style scoped>
    .header {
        height: 100px;
        background: #6ab7e4;
    }

    .banner1 {
        width: 100%;
        height: 100px;
        background: url('./assets/indexHome/banner1.png');
        display: flex;
        align-items: center;
    }

    .bannerLogo {
        float: left;
        background: url('./assets/indexHome/logo.png');
        margin-left: 15%;
        width: 300px;
        height: 80px;

    }

    .bannerSearchBox {
        float: right;
        margin-left: 40%;
        width: 140px;

    }

    /deep/ .el-input__inner {
        border-radius: 20px;

    }

    .el-input__icon {
        border-radius: 20px;
        background-color: rgb(55, 130, 197);
        height: 80%;
        width: 30px;
        line-height: 28px;
        margin-top: 4px;
    }


    .el-menu--horizontal {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .el-submenu__title {
        font-size: 20px;
    }

    ul > li {
        width: 120px;
        text-align: center;
    }

    .content {
        padding: 15px 13%;
        min-height: 530px;
    }

    .el-row {
        margin-bottom: 20px;

    &
    :last-child {
        margin-bottom: 0;
    }

    }
    .el-col {
        border-radius: 4px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .footer {
        height: 250px;
        background: linear-gradient(to top, #74a2fa, #0f5ffd);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: white;
        padding: 15px 0;
    }

    .footerOne {
        background: url('./assets/indexHome/footer.png');
        width: 205px;
        height: 45px;
    }

    .footerTwo {
        font-size: 15px;
        margin-bottom: 3px;
    }

</style>
